<template>
  <div class="register-container">
    <div class="register-card">
      <div class="logo-container">
        <div class="logo">logo</div>
        <p class="welcome-text">欢迎加入 TodoList，开启高效生活</p>
      </div>
      
      <el-form :model="registerForm" ref="registerFormRef" :rules="rules">
        <div class="form-item">
          <div class="form-label">用户名</div>
          <el-input 
            v-model="registerForm.username" 
            placeholder="请输入6-20个字符的用户名" 
            :prefix-icon="User">
          </el-input>
        </div>
        
        <div class="form-item">
          <div class="form-label">邮箱地址</div>
          <el-input 
            v-model="registerForm.email" 
            placeholder="请输入您的邮箱地址"
            :prefix-icon="Message">
          </el-input>
        </div>
        
        <div class="form-item">
          <div class="form-label">设置密码</div>
          <el-input 
            v-model="registerForm.password" 
            type="password" 
            placeholder="请设置6-20位密码"
            :prefix-icon="Lock"
            show-password>
          </el-input>
        </div>
        
        <div class="form-item">
          <div class="form-label">确认密码</div>
          <el-input 
            v-model="registerForm.confirmPassword" 
            type="password" 
            placeholder="请再次输入密码"
            :prefix-icon="Lock"
            show-password>
          </el-input>
        </div>
        
        <div class="form-item">
          <div class="form-label">手机号码</div>
          <el-input 
            v-model="registerForm.phone" 
            placeholder="请输入您的手机号码"
            :prefix-icon="Phone">
          </el-input>
        </div>
        
        <div class="form-item agreement">
          <el-checkbox v-model="registerForm.agreement">我已阅读并同意 <span class="link">用户协议</span> 和 <span class="link">隐私政策</span></el-checkbox>
        </div>
        
        <el-button 
          type="primary" 
          class="register-button" 
          :loading="loading"
          :disabled="!registerForm.agreement" 
          @click="handleRegister">
          立即注册
        </el-button>
      </el-form>
      
      <div class="divider">
        <span>其他注册方式</span>
      </div>
      
      <div class="social-login-container">
        <div class="social-login">
          <div class="social-icon wechat"><img src="../assets/wechat.png" alt="微信" /></div>
          <div class="social-icon qq"><img src="../assets/qq.png" alt="QQ" /></div>
          <div class="social-icon weibo"><img src="../assets/weibo.png" alt="微博" /></div>
        </div>
      </div>
      
      <div class="login-link">
        <span>已有账号? <router-link to="/login" class="link">立即登录</router-link></span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Lock, Message, User, Phone } from '@element-plus/icons-vue'

const router = useRouter()
const loading = ref(false)
const registerFormRef = ref(null)

const registerForm = reactive({
  username: '',
  email: '',
  password: '',
  confirmPassword: '',
  phone: '',
  agreement: false
})

// 默认头像地址
const defaultAvatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'

const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (registerForm.confirmPassword !== '') {
      registerFormRef.value.validateField('confirmPassword')
    }
    callback()
  }
}

const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== registerForm.password) {
    callback(new Error('两次输入密码不一致'))
  } else {
    callback()
  }
}

const validatePhone = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入手机号码'))
  } else {
    const reg = /^1[3-9]\d{9}$/
    if (!reg.test(value)) {
      callback(new Error('请输入正确的手机号码'))
    } else {
      callback()
    }
  }
}

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请设置密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6个字符', trigger: 'blur' },
    { validator: validatePass, trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: validatePass2, trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { validator: validatePhone, trigger: 'blur' }
  ]
}

const handleRegister = async () => {
  try {
    await registerFormRef.value.validate()
    
    if (!registerForm.agreement) {
      ElMessage.warning('请先阅读并同意用户协议和隐私政策')
      return
    }
    
    loading.value = true
    
    const response = await fetch('/api/auth/register/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        username: registerForm.username,
        email: registerForm.email,
        password: registerForm.password,
        phone: registerForm.phone,
        avatar: defaultAvatar
      })
    })
    
    if (!response.ok) {
      const errorData = await response.json().catch(() => ({}))
      throw new Error(errorData.detail || '注册失败，请检查您输入的信息')
    }
    
    // 显示注册成功弹窗
    ElMessageBox.alert('注册成功，即将跳转到登录页面', '提示', {
      confirmButtonText: '确定',
      callback: () => {
        router.push('/login')
      }
    })
  } catch (error) {
    ElMessage.error(error.message || '注册失败，请稍后再试')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #bcd7ff 0%, #a3c1ff 100%);
  position: relative;
  overflow: hidden;
}

.register-card {
  width: 400px;
  background: #fff;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.logo-container {
  text-align: center;
  margin-bottom: 24px;
}

.logo {
  font-size: 32px;
  font-weight: bold;
  color: #6366f1;
  margin-bottom: 8px;
  font-style: italic;
}

.welcome-text {
  color: #666;
  font-size: 14px;
  margin-top: 8px;
}

.form-item {
  margin-bottom: 20px;
}

.form-label {
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}

.register-button {
  width: 100%;
  height: 44px;
  border-radius: 6px;
  font-size: 16px;
  margin-top: 8px;
  background-color: #6366f1;
  border-color: #6366f1;
}

.register-button:hover {
  background-color: #4f46e5;
  border-color: #4f46e5;
}

.agreement {
  color: #666;
  font-size: 14px;
}

.divider {
  display: flex;
  align-items: center;
  margin: 24px 0;
  color: #999;
  font-size: 14px;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #eee;
}

.divider span {
  padding: 0 16px;
}

.social-login-container {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.social-login {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 12px;
  max-width: 200px;
}

.social-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
  background: #f5f5f5;
}

.social-icon:hover {
  transform: translateY(-3px);
}

.social-icon img {
  width: 18px;
  height: 18px;
}

.login-link {
  text-align: center;
  font-size: 14px;
  color: #666;
}

.link {
  color: #6366f1;
  text-decoration: none;
  cursor: pointer;
}

.link:hover {
  text-decoration: underline;
}
</style> 